


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/plugins/ztree/zTreeStyle/zTreeStyle.css">
    <script src="js/jquery/jquery.js"></script>
    <script src="js/plugins/ztree/jquery.ztree.core-3.4.js"></script>

    <script>
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        var zNodes = [
            { id:1, pId:0, name:"业务模块", open:true},
            { id:11, pId:1, name:"商品管理"},
            { id:12, pId:1, name:"订单管理"},
            { id:2, pId:0, name:"系统模块", open:true},
            { id:21, pId:2, name:"部门管理"},
            { id:22, pId:2, name:"员工管理"},
            { id:23, pId:2, name:"角色管理"},
            { id:24, pId:2, name:"权限管理"},
            { id:25, pId:2, name:"系统菜单管理"},
            { id:3, pId:0, name:"报表模块", open:true},
            { id:31, pId:3, name:"订货报表"},
            { id:32, pId:3, name:"销售报表"}
            ];

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
    </script>
</head>
<body>
    <ul id="treeDemo" class="ztree"></ul>
</body>
</html>